<template>
  <div v-if="menu.name" style="width: 580px; height: 100%; padding: 15px; border: 1px solid black">
    <div style="font-weight: bolder; font-size: 26px">
      {{ menu.label }}
    </div>
    <div>
      {{ menu.description }}
    </div>
    <div style="margin-top: 10px">
      <a-form-item label="参数">
        <a-textarea
          v-model:value="params"
          placeholder="非必填"
          :auto-size="{ minRows: 8, maxRows: 8 }"
          @change="change"
        />
      </a-form-item>
      <a-form-item label="预览">
        <div style="margin: 5px"><sync-outlined /></div>
        <div id="yulansuofang">
          <component :is="zt"></component>
        </div>
      </a-form-item>
    </div>
    <div style="display: flex; justify-content: right">
      <div>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </div>
    </div>
  </div>
  <div v-else style="width: 580px; height: 100%; padding: 15px; border: 1px solid black"></div>
</template>
<script>
import { defineComponent, ref, watch, toRefs, reactive } from 'vue'
import { SyncOutlined } from '@ant-design/icons-vue'

import regCom from '@/utils/registerComFunV2'
import factory from './factory'

export default defineComponent({
  components: { SyncOutlined },
  props: {
    checkitem: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  emits: ['portlet-selected'],
  setup(props, ctx) {
    const { checkitem: menu } = toRefs(props)
    const params = ref(JSON.stringify(menu.params))
    const change = () => {
      menu.params = JSON.parse(params.value)
    }
    const zt = ref(null)
    watch(menu, (newV) => {
      params.value = JSON.stringify(newV.params)
      // 使用详情接口获得组件的 imageParams
      factory.getPortletDetail({ id: newV.id }).then((res) => {
        console.log('页面-选择组件-组件中图片', res.data)
        newV.imageParams = res.data.imageParams
        zt.value = regCom(newV.html, newV.imageParams)
        setTimeout(() => {
          suofang()
        }, 10)
      })
    })
    //==缩放===========
    function suofang() {
      let block = document.getElementById('yulansuofang')
      Array.prototype.forEach.call(block.children, function (el) {
        // 宽度缩放比例:wr = el.offsetWidth/300, 高度缩放比例:hr = el.offsetHeight/200 , 取最大比例缩放
        let wr = el.offsetWidth / 300
        let r = wr
        el.style.transform = `scale(${1 / r},${1 / r})`
        el.style['transform-origin'] = '0% 0%'
      })
    }

    /***表单*****************************/
    //==页脚按钮=================
    const handleOk = (e) => {
      ctx.emit('portlet-selected', menu.value)
    }

    return {
      handleOk,
      menu,
      params,
      change,
      zt,
    }
  },
})
</script>

<style scoped>
#yulansuofang {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #d9d9d9;
}
</style>
